<template>
  <view>
    <nav-bar :title="pageTitle"></nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="content-box">
      <view class="video-box">
      <view v-if="videoDetail.videoUrl">
        <video
         class="video"
         :src="videoDetail.videoUrl"
         controls="controls"
      ></video>
      </view>
      <view v-else>
        <rich-text :nodes="videoDetail.videoContent || '暂无'" class="video-text"></rich-text>
      </view>
    </view>
    <view class="detail-box">
      <view class="title-box">
        <view class="title">{{ videoDetail.title }}</view>
        <view class="active-collect-box" v-if="videoDetail.isCollected === 1" @click="cancelCollect">
          <uni-icons type="heart-filled" color="#115BAA" size="18"></uni-icons>
          <view class="text">已收藏</view>
        </view>
        <view class="collect-box" v-else @click="clickCollect">
          <uni-icons type="heart" size="18"></uni-icons>
          <view class="text">收藏</view>
        </view>
      </view>
    </view>
    <view class="img-txt-detail">
        <view class="title">-下拉查看图文详情-</view>
        <view class="detail-item">
          <view class="courseIntro">
            <!-- <view class="intro-icon">课程介绍</view> -->
            <image
              class="courseIntro-img"
              :src="baseImgUrl + '/userImg/img_course_introduction.png'"
            />
            <rich-text :nodes="videoDetail.courseIntro || '暂无'" class="courseIntro-text"></rich-text>
          </view>
          <view class="courseIntro">
              <image
              class="courseIntro-img"
              :src="baseImgUrl + '/userImg/img_course_type.png'"
            />
            <rich-text :nodes="videoDetail.courseClass || '暂无'" class="courseIntro-text"></rich-text>
          </view>
        </view>
    </view>
    </view>
    </scroll-view>

  </view>
</template>

<script>
  import api_video from '@/api/user.js'
  import { baseImgUrl,baseIconUrl } from '@/config'
  export default {
    name: 'videoDetail',

    data() {
      return {
        baseImgUrl,
        baseIconUrl,
        pageTitle: '',
        videoList: [{}, {}, {}, {}, {}, {}, {}],
        videoDetail: {},
        scrollHeight: '',
        id:null,
        isCollected: 0
      }
    },

    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 0 + 'px'
      this.pageTitle = options.title || ''
      this.id = Number(options.id) || ""
      this.getVideoDetail()
    },

    methods: {
      getVideoDetail() {
        api_video.videoDetail(this.id).then(res => {
          const result = res.data
          result.courseIntro = result.courseIntro && result.courseIntro.replace(/\n/g, '<br/>')
          result.courseClass = result.courseClass && result.courseClass.replace(/\n/g, '<br/>')
          this.videoDetail = res.data
          this.id = this.videoDetail.id
          if(!this.videoDetail.videoUrl) return
      })
      },  
      //收藏
      clickCollect(){
        let flag = false
        if (this.videoDetail.isCollected === 1) {
          flag = true; 
          this.videoDetail.isCollected === 0 
        } else{
          flag = false;
          this.videoDetail.isCollected === 1 
        }
        const params = {
          videoId: this.id,
        }
        api_video.addCollect(params).then(res => {
          if (res.code !== 200) return
          wx.showToast({
            title: flag ? '取消成功' : '收藏成功',
            icon: 'success'
            })
          this.getVideoDetail()
      })
      },
      //取消收藏
      cancelCollect(){
        let flag = false
        if (this.videoDetail.isCollected === 1) {
          flag = true; 
          this.videoDetail.isCollected === 0 
        } else{
          flag = false;
          this.videoDetail.isCollected === 1 
        }
        const params = {
          videoId: this.id,
        };
      api_video.cancelCollect(params).then((res) => {
        if (res.code !== 200) return
        wx.showToast({
            title: flag ? '取消成功' : '收藏成功',
            icon: 'success'
            })
        this.getVideoDetail()
      });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .video-box {
    padding: 30rpx;
    background-color: #FFF;
    .video {
      width: 690rpx;
      height: 460rpx;
      border-radius: 16rpx;
    }
  }
  .video-list {
    white-space: nowrap;
		width: 100%;
    padding: 20rpx 30rpx;
    .video-item {
      display: inline-block;
      width: 228rpx;
      height: 152rpx;
      border-radius: 16rpx;
      margin-right: 20rpx;
      background-color: #ffdddd;
    }
  }
  .detail-box {
    margin: 20rpx 30rpx 30rpx;
    padding: 30rpx;
    background-color: #FFF;
    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
      }
      .collect-box,
      .active-collect-box {
        display: flex;
        .text {
          margin-left: 6rpx;
          font-size: 24rpx;
        }
      }
      .active-collect-box {
        .text {
          color: #115BAA;
        }
      }
    }
    .desc-box {
      display: block;
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #808080;
    }
  }
  .img-txt-detail {
    margin: 0 30rpx 30rpx;
    padding: 0 45rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .title {
      padding: 28rpx 0 10rpx;
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
    .detail-item {
      // .detail-img {
      //   width: 100%;
      //   height: auto;
      // }
      background: #FFF;
      .courseIntro{
        display: block;
        margin-top: 15rpx;
        padding-bottom: 20rpx;
        background: #fff;
        border-radius: 12rpx;
        position: relative;
        .intro-icon {
          position: absolute;
          left: 0;
          top: 0;
          height: 40rpx;
          padding: 0 14rpx;
          border-radius: 16rpx 0 16rpx 0;
          line-height: 40rpx;
          font-size: 20rpx;
          color: #FFF;
          background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
        }
        .courseIntro-img {
          width: 270rpx;
          height: 66rpx;
        }
        .courseIntro-text{
          display: block;
          padding: 20rpx 0 20rpx 20rpx;
        }
      }
    }
  }
  .video-text{
    display: block;
    padding: 20rpx;;
  }
</style>
